<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Modificar el diseño del selector de archivos con CSS</title>
    
    <script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
    
    <script>
    $(document).ready(function(){
        // Cuando se modifique el input type=file
        $(".custom-input-file input:file").change(function(){
            if($(this).val())
            {
                // Si tiene valor, se muestra en el class .files
                $(this).parent().find(".files").html($(this).val());
            }else{
                // Si no tiene valor, se muestran los puntos ...
                $(this).parent().find(".files").html("...");
            }
        });
    });
    </script>
    
    <style>
    .custom-input-file {
        float:left;
        overflow:hidden;
        position:relative;
        cursor:pointer;
        width:70px;
        //border:1px solid #ccc;
        //border-radius:5px;
        text-align:center;
        font-family:Arial;
        font-size:12px;
    }
    .custom-input-file:hover {
        //background-color:#ccc;
    }
    .custom-input-file input[type=file] {
        margin:0;
        padding:0;
        outline:0;
        font-size:10000px;
        //border:10000px solid transparent;
        opacity:0px;
        filter:alpha(opacity=0);
        position:absolute;
        right:-1000px;
        top:-1000px;
        cursor:pointer;
    }
    .files {
        font-size:9px;
    }
    </style>
</head>

<body>
    <h1>Modificar el diseño del selector de archivos con CSS</h1>
    
    <p>
        Aquí se muestra como utilizar estilo css para modificar el
        diseño de un input type=file.
        <br>Se utiliza jquery, únicamente para mostrar el archivo
        seleccionado.
    </p>

    <form action="" method="post" enctype="multipart/form-data">
        <div class='custom-input-file'>
            <input type="file" name="images">
            <img src="../../imagenes/clip20.jpg">
            <div class="files">...</div>
        </div>
        <input type="submit" class="button" value="Enviar">
    </form>

    <p>Información obtenida de:
        <a href="http://jsfiddle.net/angelfcm/nETSD/"
        target="_blank">http://jsfiddle.net/angelfcm/nETSD/</a>
    </p>
    
    <p>
    <a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
    </p>
</body>
</html>

